<template>
    <view class="container">
        <view class="logo">
            <image src="/static/ylslogo.png" class="logo_bg"></image>
            <view>云链商供应端</view>
        </view>
        <view class="inputlist">
            <view class="card-group">
                <iconsfont customIcons="icon-renyuan" class="icon" size="32"></iconsfont>
                <input type="number" v-model="tel" maxlength="11" placeholder="请输入您的手机号" />
            </view>
            <view class="card-group" v-show="showPassword">
                <iconsfont customIcons="icon-mima" class="icon" size="32"></iconsfont>
                <input type="password" v-model="password" placeholder="请输入登录密码" />
            </view>
            <view class="card-group" v-show="!showPassword">
                <iconsfont customIcons="icon-mima" class="icon" size="32"></iconsfont>
                <view class="verification">
                    <input type="number" v-model="code" placeholder="请输入验证码" />
                    <view class="line"></view>
                    <button class="get" :disabled="disabled" @click="getCode">
                        {{ countdown }}<text v-show="timestatus">秒重获</text>
                    </button>
                </view>
            </view>
            <view class="forget" v-if="showPassword" @click="showPassword = !showPassword">验证码登录</view>
            <view class="forget" v-else @click="showPassword = !showPassword">密码登录</view>
            <button class="btn btn-success btn-save" @click="loginByService">登录</button>
            <button class="btn btn-success-hollow" @click="goUrl('/pages_supplier/packet/login/verification')">
                马上入驻
            </button>
        </view>
        <uni-popup ref="tip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="登录商户后台点击右上角的商户名称,可以查看商户ID号"
                :before-close="false"
                @confirm="save"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations, mapState } from "vuex"

import cardCellInput from "@/pages_supplier/components/common/cell/card-cell-input.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import config from "@/config/config.js"
import { Login, LoginBySms } from "@/pages_supplier/service/api/authorize.js"
import { SendSmsNoVerifyCode } from "@/pages_supplier/service/api/member.js"
import { GetAdminUserSystemList } from "@/pages_supplier/service/api/supplier.js"
export default {
    components: {
        cardCellInput,
    },
    data() {
        return {
            showPassword: true,
            isPwdType: true,
            url: "",
            isShow: false,
            businessCode: "",
            refresh: true,
            tel: "",
            password: "",
            code: "",
            timestatus: false,
            disabled: false,
            countdown: "获取验证码",
            datas: [],
        }
    },
    onLoad(e) {},
    mounted() {},
    methods: {
        ...mapMutations(["SET_AUTH"]),
        loginByService() {
            var that = this
            if (this.tel == "") {
                this.easyToast("请输入手机号")
                return
            }
            if (this.showPassword) {
                if (this.password == "") {
                    this.easyToast("请输入密码")
                    return
                }
                let param = {
                    userName: this.tel,
                    password: this.password,
                }
                uni.showLoading({
                    title: "登录中",
                })
                Login(param).then((res) => {
                    if (res.State == 1 && res.Data) {
                        let token = res.Data.Token
                        let webInfo = {
                            Token: token,
                        }
                        //临时保存
                        storage.setCache("webInfo", webInfo)
                        // this.easyReLaunch('/pages/index/index')
                        setTimeout((e) => {
                            //获取登录者信息
                            this.getAdminUserSystemList()
                        }, 500)
                    } else {
                        uni.hideLoading()
                        this.easyToast(res.Msg)
                    }
                })
            } else {
                if (this.code == "") {
                    this.easyToast("请输入验证码")
                    return
                }
                let path = "?userName=" + this.tel + "&ValidType=8&ValidCode=" + this.code
                uni.showLoading({
                    title: "登录中",
                })
                LoginBySms(path).then((res) => {
                    console.log(res)
                    if (res.State == 1 && res.Data) {
                        // let token = res.Data.Token
                        // this.SET_AUTH(token)
                        // storage.setCache("token", token)
                        // storage.setCache("SupplierId", res.Data.SupplierId)
                        // storage.setCache("SupplierName", res.Data.SupplierName)
                        // uni.hideLoading()
                        // this.easyReLaunch('/pages/index/index')
                        let token = res.Data.Token
                        let webInfo = {
                            Token: token,
                        }
                        //临时保存
                        storage.setCache("webInfo", webInfo)
                        setTimeout((e) => {
                            //获取登录者信息
                            this.getAdminUserSystemList()
                        }, 500)
                    } else {
                        uni.hideLoading()
                        this.easyToast(res.Msg)
                    }
                })
            }
        },
        //获取平台商户
        getAdminUserSystemList() {
            GetAdminUserSystemList().then((res) => {
                console.log(res)
                if (res.State == 1 && res.Data && res.Data.length > 0) {
                    this.datas = res.Data
                    this.selected(this.datas[0])
                    // if(res.Data.length>1){
                    // 	uni.hideLoading()
                    // 	//2个以上
                    // 	this.$refs.popCheckCut.openPop()
                    // }else{
                    // 	//1个
                    // 	this.selected(this.datas[0])
                    // }
                } else {
                    uni.hideLoading()
                    this.easyToast(res.Msg)
                }
            })
        },
        selected(item) {
            this.loginByAccount(item)
        },
        loginByAccount(item) {
            uni.showLoading({
                title: "登录中",
            })
            let param = {
                type: 1,
                shopId: item.ShopId,
                userId: item.UserId,
            }
            Login(param).then((res) => {
                if (res.State == 1 && res.Data) {
                    let token = res.Data.Token
                    this.SET_AUTH(token)
                    storage.setCache("token", token)
                    storage.setCache("SupplierId", res.Data.SupplierId)
                    storage.setCache("SupplierName", res.Data.SupplierName)
                    uni.hideLoading()
                    storage.removeCache("webInfo")
                    this.easyReLaunch("/pages_supplier/packet/index/index")
                } else {
                    uni.hideLoading()
                    this.easyToast(res.Msg)
                }
            })
        },
        getCode() {
            var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
            var that = this
            if (that.tel == "") {
                this.easyToast("请输入手机号码")
                return false
            } else if (!myreg.test(that.tel)) {
                this.easyToast("请输入正确手机号码")
                return false
            } else {
                that.disabled = true //禁用点击
                let path = "?tel=" + that.tel + "&validType=8"
                SendSmsNoVerifyCode(path)
                    .then((res) => {
                        if (res.State == 1) {
                            that.countdown = 60
                            that.timestatus = true
                            that.clear = setInterval(that.countDown, 1000)
                        } else {
                            this.easyToast(res.Msg)
                            that.disabled = false
                        }
                    })
                    .catch((err) => {
                        console.log(err)
                        that.disabled = false
                    })
            }
        },
        countDown() {
            var that = this
            if (!that.countdown) {
                that.disabled = false
                that.timestatus = false
                that.countdown = "获取验证码"
                clearInterval(that.clear)
            } else {
                --that.countdown
            }
        },
        tip() {
            this.$refs.tip.open()
        },
        save() {
            this.$refs.tip.close()
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
    },
}
</script>

<style lang="scss">
page {
    background: #ffffff;
}
.logo {
    padding: 118rpx 0 0 0;
    text-align: center;
    image {
        width: 140rpx;
        height: 140rpx;
        display: block;
        margin: 0 auto;
    }
    view {
        padding-top: 28rpx;
        font-size: 36rpx;
        color: #1e1e1e;
    }
}
.inputlist {
    padding: 66rpx 56rpx 0 56rpx;
    .card-group {
        height: 98rpx;
        background: #f5f6f7;
        border-radius: 49rpx;
        display: flex;
        align-items: center;
        margin-bottom: 40rpx;
        .icon {
            margin: 0 24rpx 0 40rpx;
        }
        input {
            height: 98rpx;
            flex: 1;
            background: none;
            border-radius: 0 49rpx 49rpx 0;
            font-size: 36rpx;
            color: $color-gray-1;
        }
    }
}
.forget {
    display: flex;
    justify-content: flex-end;
    font-size: 28rpx;
    color: #32a1ff;
    margin-top: -16rpx;
    padding-bottom: 24rpx;
}
.btn {
    margin-bottom: 40rpx;
}
.verification {
    flex: 1;
    display: flex;
    align-items: center;

    .line {
        width: 2rpx;
        height: 48rpx;
        background: #efefef;
        margin-right: 24rpx;
    }

    .get {
        color: $app-color-main;
        height: 98rpx;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        padding: 0;
        margin: 0 24rpx 0 0;
        background: none;
        border: none;
        outline: none;

        &::after {
            border: none;
        }
    }
}
.logo_bg {
    border-radius: 24rpx;
    border: 1rpx solid $app-color-main;
}
</style>
